<template>
  <div class="channel-edit">
    <van-cell :border="false">
      <div slot="title" class="title-text">我的频道</div>
      <van-button 
      size="mini" 
      round 
      type="danger" 
      plain 
      class="edit-btn" 
      @click="isEdit = !isEdit">
      {{ isEdit ? '完成': '编辑' }}
      </van-button>
    </van-cell>
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item 
      class="grid-item" 
      v-for="value in 8"
      :key="value"
      text="仅测试"
      @click="onAddChannel(channel)"
      >
      <!-- <span 
      class="text" 
      :class="{active: index === active}"
      slot="text">
      {{channel.name}}
      </span> -->
      <van-icon 
      slot="icon" 
      name="clear" 
      v-show="isEdit"
      >

      </van-icon>

      </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item 
      class="grid-item" 
      v-for="(channel, index) in recommendChannels" 
      :key="index" 
      :text="channel.name"
      icon="plus" />
    </van-grid>
    <!-- /频道推荐 -->
  </div>
</template>

<script>

import {getAllChannels} from '@/api/channel'
export default {
    name: 'ChannelEdit',
    data () {
        return {
            allChannels: [], //所有频道
            isEdit: false,    // 控制编辑状况的显示
            fiexdChannels: [0]
       }
    },
    props: {
        myChannels: {
            type: Array,
            required: true
        },
        active: {
            type: Number,
            required: true
        },
        created () {
            this.loadAllChannels()
        },

        methods : {
            async loadAllChannels () {
                try {
                    const { data } = await getAllChannels()
                    this.allChannels = data.data.channels
                } catch (err){
                    this.$toast('获取频道列表数据失败')
                }
            }
        },
        recommendChannels () {
            const channels = []
            this.allChannels.forEach(channel => {
            // find 遍历数组，找到满足条件的元素项，如果没找到则返回undefined
            const ret = this.myChannels.find(myChannel => {
            return myChannel.id === channel.id
        })

            // 如果我的频道中不包括该频道项，则收集到推荐频道中
            if (!ret) {
                channels.push(channel)
            }
        })

            // 把计算结果返回
            return channels
        },
        onAddChannel (channel) {
            this.myChannels.push(channel)
        },
    }
}
</script>

<style scoped lang="less">
    .channel-edit {
        padding: 85px 0;

        .title-text {
            font-size: 32px;
            color: #333333;
        }

        .edit-btn{
            width: 104px;
            height: 48px;
            font-size: 26px;
            color: #f85959;
            border: 1px solid #f85959;
        }

        /deep/ .grid-item{
            width: 160px;
            height: 86px;
            .van-grid-item__content {
                white-space: nowrap;
                background-color: #f4f5f6;
                .van-icon-plus {
                    font-size: 28px;
                    margin-right: 6px;
                }
                .van-grid-item__text, .text {
                    font-size: 28px;
                    color: #222;
                    margin-top: 0;
                }
                .van-grid-item__icon-wrapper {
                    position: unset;
                }
            }
        } 

        /deep/ .my-grid {
            .grid-item {
                .van-icon-clear {
                    position: absolute;
                    right: -10px;
                    top: -10px;
                    font-size: 30px;
                    color: #cacaca;
                    z-index: 2;
                }
            }
        }
        /deep/ .recommend-grid {
            .grid-item {
                .van-grid-item__content {
                    flex-direction: row;
                    .van-icon-plus {
                        font-size: 28px;
                        margin-right: 6px;
                    }
                    .van-grid-item__text {
                        margin-top: 0;
                    }
                }
            }
        }
    
    }
</style>
    